<template>
  <el-dialog
    v-model="visible"
    :title="!dataForm.rightsId ? $t('crud.addBtn') : $t('groups.edit')"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      :label-width="$t('language') === 'English' ? '125px' : '80px'"
      @submit.prevent
    >
      <el-form-item
        :label="$t('userRights.rightsName')"
        prop="rightsName"
      >
        <el-input
          v-model="dataForm.rightsName"
          :placeholder="$t('userRights.enterContent')"
          maxlength="5"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        :label="$t('userRights.rightsIcon')"
        prop="icon"
      >
        <img-upload v-model="dataForm.icon" />
      </el-form-item>
      <el-form-item
        :label="$t('userRights.rightsIntroduce')"
        prop="description"
      >
        <el-input
          v-model="dataForm.description"
          type="textarea"
          :autosize="{ minRows: 2}"
          maxlength="250"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        :label="$t('temp.sequence')"
        prop="seq"
      >
        <el-input-number
          v-model="dataForm.seq"
          controls-position="right"
          :min="-99999"
          :max="9999999"
          :label="$t('distribution.errorIntegerTip1')"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t('remindPop.cancel') }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="onSubmit()"
        >
          {{ $t('remindPop.confirm') }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshDataList'])

let isSubmit = ref(false)
const dataRule = {
  rightsName: [
    { required: true, message: $t('userRights.nameCanNotEmpty'), trigger: 'blur', pattern: '[^ \x22]+' }
  ],
  icon: [
    { required: true, message: $t('userRights.iconCanNotEmpty'), trigger: 'blur' }
  ],
  description: [
    { required: true, message: $t('userRights.intrCanNotEmpty'), trigger: 'blur', pattern: '[^ \x22]+' }
  ]
}
const dataForm = ref({
  rightsId: null,
  rightsName: null,
  icon: null,
  description: null,
  seq: 1
})
let validPic = false
const dataFormRef = ref(null)
watch(() => dataForm.value.icon, () => {
  if (validPic) {
    dataFormRef.value.validateField('icon')
  }
})
const visible = ref(false)

const init = (rightsId) => {
  validPic = false // 初始化不验证是否选择图片
  dataForm.value.rightsId = rightsId || 0
  visible.value = true
  isSubmit = false
  nextTick(() => {
    dataFormRef.value.resetFields()
    if (dataForm.value.rightsId) {
      http({
        url: http.adornUrl('/user/userRights/info/' + dataForm.value.rightsId),
        method: 'get',
        params: http.adornParams()
      }).then(({ data }) => {
        dataForm.value = data
      })
    } else {
      // 获取最大的序号
      http({
        url: http.adornUrl('/user/userRights/getMaxSeq'),
        method: 'get',
        params: http.adornParams()
      }).then(({ data }) => {
        dataForm.value.seq = data
      })
    }
  })
}
/**
 * 表单提交
 */
const onSubmit = () => {
  validPic = true // 用于解决选择图片提示不隐藏问题
  dataFormRef.value.validate((valid) => {
    if (valid) {
      if (isSubmit) {
        return false
      }
      isSubmit = true
      http({
        url: http.adornUrl('/user/userRights'),
        method: dataForm.value.rightsId ? 'put' : 'post',
        data: http.adornData(dataForm.value)
      }).then(() => {
        ElMessage({
          message: $t('remindPop.succeeded'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            visible.value = false
            emit('refreshDataList')
          }
        })
      }).catch(() => {
        isSubmit = false
      })
    }
  })
}
defineExpose({ init })
</script>
